<!--虚拟列表组件-->
<template>
    <div>
        <div class="list-wrap" :style="{height:height+'px'}" ref="listWrap" @scroll="scrollListener">
            <div class="scroll-bar" ref="scrollBar"></div>
            <ul v-if="showList.length>0" class="list" ref="list">
                <li 
                :style="{height:itemHeight+'px',lineHeight:itemHeight+'px'}" 
                @click="clickItem(val)" 
                ref="item" 
                v-for="(val,index) in showList" 
                :key="index">
                    <slot :item="val">
                        <div class="item-div" :style="{height:itemHeight+'px'}" >
                            {{val}}
                        </div>
                    </slot>
                </li>
            </ul>
            <ul v-else class="list">
                <li class="list-item-empty" :style="{height:itemHeight+'px',lineHeight:itemHeight+'px'}">
                    无数据
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'vi-list',
    props:{
        //数据
        data:{
            type:Array,
            require:true
        },
        //容器高度
        height:{
            type:Number,
            default:300
        },
        //行高
        itemHeight:{
            type:Number,
            default:26
        }
    },
    data() {
        return {
            //显示几条数据
            showNum: 10,
            //滚动过程显示的开始索引
            start: 0,
            //滚动过程显示的结束索引
            end: 11,
        }
    },
    created(){
        this.initIndex()
    },
    watch:{
        // 性能问题不再监控 手动处理
        // data:{
        //     deep:true,
        //     handler(){
        //         this.initWrap()
        //     }
        // },

        height:{
            handler(){
                this.initIndex()
            }
        },  
    },
    computed:{
        // 显示的数组，用计算属性计算
        showList(){
            return this.data?this.data.slice(this.start, this.end):[];
        },
    },
    mounted(){
        this.initWrap()
    },
    methods:{

        clickItem(val){
            this.$emit('click-item',val)
        },

        //索引初始化
        initIndex(){
            this.showNum=Math.ceil(this.height/this.itemHeight)
            this.end=this.showNum
        },

        //容器初始化
        initWrap(){
            //计算滚动容器高度
            this.$nextTick(()=>{
                this.$refs.listWrap.style.height = this.height + 'px';
                //计算总的数据需要的高度，构造滚动条高度
                this.$refs.scrollBar.style.height = this.itemHeight * this.data.length + 'px';
            })
        },

        //滚动条和容器初始化
        initWrapAndScroll(){
            //计算滚动容器高度
            this.$nextTick(()=>{
                this.$refs.listWrap.style.height = this.height + 'px';
                //计算总的数据需要的高度，构造滚动条高度
                this.$refs.scrollBar.style.height = this.itemHeight * this.data.length + 'px';
                this.$refs.listWrap.scrollTop=0
            })
        },

        //滚动条监听
        scrollListener(){
            //获取滚动高度
            let scrollTop = this.$refs.listWrap.scrollTop;
            //开始的数组索引
            this.start = Math.floor(scrollTop / this.itemHeight);
            //结束索引
            this.end = this.start + this.showNum+5;
            //绝对定位对相对定位的偏移量
            if(this.$refs.list&&this.$refs.list.style){
                this.$refs.list.style.top = this.start * this.itemHeight + 'px';
            }
        },

        //滚动条置0
        crearScroll(val){
            this.$refs.listWrap.scrollTop=val?val:0
        }
    }
}
</script>
<style>
    .list-wrap{
        position: relative;
        overflow-y: auto;
        box-sizing: border-box;
        border: solid 1px #DCDFE6;
    }
    .list{
        min-width: 100%;
        position: absolute;
        box-sizing: border-box;
        top: 0;
        padding-left: 10px;
        padding-right: 10px;
        left: 0;
        margin: 0;
    }
    .item-div{
        border-bottom: solid 1px #DCDFE6;
    }
    .list-item-empty{
        text-align: center;
        color: #DCDFE6;
    }
    ::-webkit-scrollbar {
        width: 8px;
        height: 6px;
        background-color: #fff;
    }

    ::-webkit-scrollbar-thumb {
        display: block;
        min-height: 5px;
        min-width: 5px;
        border-radius: 6px;
        background-color: rgb(217, 217, 217);
    }

    ::-webkit-scrollbar-thumb:hover {
        display: block;
        min-height: 5px;
        min-width: 8px;
        border-radius: 6px;
        background-color: rgb(159, 159, 159);
    }

</style>